<template>
  <div class="featured-content" :style="containerStyle">
    <!-- 区块标题 -->
    <div class="section-header">
      <div class="title-section">
        <h2 class="section-title">{{ property.sectionTitle }}</h2>
        <p v-if="property.sectionSubtitle" class="section-subtitle">
          {{ property.sectionSubtitle }}
        </p>
      </div>
      <div v-if="property.moreUrl" class="more-link" @click="handleMoreClick">
        <span>更多</span>
        <Icon icon="ep:arrow-right" />
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="content-area" :class="`layout-${property.layoutType}`">
      <div 
        v-for="item in property.featuredItems" 
        :key="item.id"
        class="featured-item"
        @click="handleItemClick(item)"
      >
        <div class="item-image-container">
          <img 
            :src="item.imgUrl" 
            :alt="item.title"
            class="item-image"
            @error="handleImageError"
          />
          <div v-if="item.price" class="price-tag">{{ item.price }}</div>
        </div>
        
        <div class="item-content">
          <h3 class="item-title">{{ item.title }}</h3>
          <p v-if="item.subtitle" class="item-subtitle">{{ item.subtitle }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { FeaturedContentProperty, FeaturedItem } from './config'

defineOptions({ name: 'FeaturedContent' })

const props = defineProps<{
  property: FeaturedContentProperty
}>()

// 计算容器样式
const containerStyle = computed(() => {
  const style = props.property.style
  return {
    backgroundColor: style.bgType === 'color' ? style.bgColor : 'transparent',
    backgroundImage: style.bgType === 'img' ? `url(${style.bgImg})` : 'none',
    marginTop: style.marginTop + 'px',
    marginBottom: style.marginBottom + 'px',
    marginLeft: style.marginLeft + 'px',
    marginRight: style.marginRight + 'px',
    paddingTop: style.paddingTop + 'px',
    paddingBottom: style.paddingBottom + 'px',
    paddingLeft: style.paddingLeft + 'px',
    paddingRight: style.paddingRight + 'px',
    borderRadius: style.borderRadius + 'px'
  }
})

// 处理项目点击
const handleItemClick = (item: FeaturedItem) => {
  if (item.url) {
    // 这里可以处理跳转逻辑
    console.log('项目点击:', item.url)
  }
}

// 处理更多点击
const handleMoreClick = () => {
  if (props.property.moreUrl) {
    // 这里可以处理跳转逻辑
    console.log('更多点击:', props.property.moreUrl)
  }
}

// 处理图片加载错误
const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.src = 'https://static.iocoder.cn/mall/placeholder.png'
}
</script>

<style scoped lang="scss">
.featured-content {
  width: 100%;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .title-section {
      .section-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin: 0 0 4px 0;
      }
      
      .section-subtitle {
        font-size: 14px;
        color: #666;
        margin: 0;
      }
    }
    
    .more-link {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #666;
      font-size: 14px;
      cursor: pointer;
      transition: color 0.3s ease;
      
      &:hover {
        color: #409eff;
      }
    }
  }
  
  .content-area {
    &.layout-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    
    &.layout-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .featured-item {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      }
      
      .item-image-container {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
        
        .item-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }
        
        .price-tag {
          position: absolute;
          top: 8px;
          right: 8px;
          background: rgba(255, 77, 79, 0.9);
          color: white;
          padding: 4px 8px;
          border-radius: 12px;
          font-size: 12px;
          font-weight: bold;
        }
        
        &:hover .item-image {
          transform: scale(1.05);
        }
      }
      
      .item-content {
        padding: 12px;
        
        .item-title {
          font-size: 14px;
          font-weight: bold;
          color: #333;
          margin: 0 0 4px 0;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .item-subtitle {
          font-size: 12px;
          color: #666;
          margin: 0;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 480px) {
  .featured-content {
    .content-area.layout-grid {
      grid-template-columns: 1fr;
    }
  }
}
</style>

